
<template>  
    <!-- 侧边栏 -->
    <!-- background-color="#545c64"      rgb(84,92,100)-->
    <!-- :collapse="varCollapse"  ：是否开启折叠 -->
    <!-- :collapse-transition="true" 折叠时是否加动画效果 -->
    <el-aside :width="asideWidth" style="background-color:rgb(84,92,100)">
      <el-menu style="text-align:left"
               class="el-menu-vertical"
               background-color="#545c64"
               :collapse="varCollapse"
               :collapse-transition="false">
        <el-menu-item style="font-size: 26px; font-weight:600; color:white"> 
          <!-- 菜单 -->
          <i class="el-icon-menu" style="color: white;"></i>
          <span>菜单</span>
        </el-menu-item>
      </el-menu>
      <!-- text-align：文本对齐方式 default-active="Home" -->
      <el-menu style="text-align:left;"
               background-color="#545c64"
               default-active="/Admin"
               :collapse="varCollapse"
               :collapse-transition="false" @click.native="checkLogin()">
               <!-- 
               @click.native="checkLogin()"：用于校验当前等录凭证是否过期，
               如果过期，跳回首页 
               -->
        <el-menu-item index="/Home" style="color: white;" @click="setCls()">
          <i class="el-icon-s-home" style="color: white;"></i>
          <router-link active-class="active" to="/summary">
            <span style="color: white;">首页</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="/Admin">
          <i class="el-icon-s-opportunity" style="color: white;"></i>
          <router-link active-class="active" to="/admin_list">
            <span style="color: white;">管理员中心</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="/User" style="color: white;">
          <i class="el-icon-s-opportunity" style="color: white;"></i>
          <router-link active-class="active" to="/user_list">
            <span style="color: white;">用户管理</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="/Warehouse" style="color: white;">
          <i class="el-icon-s-opportunity" style="color: white;"></i>
          <router-link active-class="active" to="/ware_list">
            <span style="color: white;">仓库管理</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="Goods" style="color: white;">
          <i class="el-icon-s-opportunity" style="color: white;"></i>
          <router-link active-class="active" to="/goods_list">
            <span style="color: white;">仓库物品管理</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="Category" style="color: white;">
          <i class="el-icon-s-opportunity" style="color: white;"></i>
          <router-link active-class="active" to="/good_cate_list">
            <span style="color: white;">物品分类管理</span>
          </router-link>
        </el-menu-item>
      </el-menu>
    </el-aside>
</template>

<script>
export default {
  name:'Aside',
  props:['login'],
  data() {
    return{
      varCollapse:false,
      asideWidth:'160px'
    }
  },
  mounted(){
    console.log('事件总线$on，varColl...')
    this.$bus.$on('varColl', this.converAside)
  },
  beforeDestroy(){
    this.$bus.$off('varColl')
  },
  methods: {
    converAside(isCollapse, width) {
      console.log('接收自定义事件参数：' + isCollapse  + '，' + width)
      this.varCollapse = isCollapse
      this.asideWidth = width
    },
    checkLogin(){
      console.log('校验登录...')
      let ticketJsonStr = localStorage.getItem('ticket')
      let ticketJson = JSON.parse(ticketJsonStr)
      let expireTime = ticketJson.expireTime
      console.log('校验登录，token数据：', ticketJsonStr)
      console.log('当前时间：', Date.now())
      console.log('过期时间：', expireTime)
      console.log('校验登录，时间比对：', (Date.now() < expireTime))
      if(Date.now() > expireTime){
        //清除存储
        localStorage.removeItem('ticket')
        /*
        设置状态为未登录（父组件向子组件传递函数，
        子组件执行父组件函数，并将子组件数据到父组件）
        */
        this.$props.login(false)
        //回退到原页面
        location.href = 'http://localhost:8002/#/'
        console.log('回到首页...')
      } 

    },
    setCls(){
      
    }
  }
}
</script>

<style scoped>
  .el-aside {
    color: #333;
    margin: 0px;
    border: 0px;
  }
  /*设置点击前的样式 */
  a{
    text-decoration: none;
    color: #fff;
	}
  /*设置点击后的样式 */
  .router-link-active {
    text-decoration: none;
    color: #fff;
  }
</style>